

class shopping_Cart {
    // 这里我们设置一个全局的总金额
    price = 0;
    // 这里设置一个选中商品的总数量
    number = 0;
    constructor() {
        // console.log(this.$(".btn-primary"));
        this.getGoodsNode();

        // 全选的实现
        this.$(".getSelect").addEventListener('click', this.getSelect.bind(this));

        // 获取list-body的节点并给其绑定点击事件
        this.$('.list-body').addEventListener('click', this.removeGoods.bind(this));

       let arr=[1,3,5,6,7];
       let a=JSON.stringify(arr)
        
       localStorage.setItem('a',a);
       let get=localStorage.getItem('a');
       console.log(get);
       console.log(JSON.parse(get));
    //    let str=JSON.





    }


    // 创建一个获取服务器中已经添加数据的方法,并将请追加到页面中
    async getGoodsNode() {

        // 因为想要获取服务器添加的列表需要向服务器传递一个 用户的id 而用户的id我们已经添加到了localStorage中
        let user_id = localStorage.getItem('user_id');
        // console.log(user_id);

        // 这里我们需要向服务器发送get请求
        //    这里是访问服务器中访问购物车的接口 必须携带的我们添加的token值
        const AUTH_TOKEN = localStorage.getItem('token')
        axios.defaults.headers.common['authorization'] = AUTH_TOKEN;
        //  axios.defaults.headers.common.authorization = AUTH_TOKEN
        //     headers['Content-Type']  也是 给 headers 对象中添加属性,只是. 语法不支持 Content-Type
        // axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        // 这里是访问服务器的get请求,以获取服务器中的数据,用于我们操作
        let { data, status } = await axios.get('http://localhost:8888/cart/list', {
            params: {
                id: localStorage.getItem('user_id')
            }
        })
        // console.log(data);
        // console.log(data);
        let html = '';
        // 这里是判断服务器的状态和获取数据的状态,当服务器的状态==200,获取数据的状态为==1时就代表,获取数据成功
        if (status == 200 && data.code == 1) {
            // 这里我们就循环遍历获取到的数据的对象,取出其中的每一天数据,进行拼接,最后在将拼接好的数据添加到页面中
            data.cart.forEach(ele => {

                html += `<div data-v-33432b6e="" class="list-item" id=${ele.goods_id}>
          
               <div data-v-33432b6e="" class="item-box">
                <div data-v-33432b6e="" class="item-table">
                    <div data-v-33432b6e="" class="item-row clearfix">
                        <!-- <div data-v-33432b6e="" class="col col-check"><i data-v-33432b6e=""
                                class="iconfont icon-checkbox icon-checkbox-selected">√</i>
                        </div> -->

                        <div class="t-checkall fl Select ">
                            <input id="input" type="checkbox" class="input goodsSelect"/>
                           
                        </div>
                        <div data-v-33432b6e="" class="col col-img"><a data-v-33432b6e=""
                                href="javascript:void(0)"><img data-v-33432b6e="" alt=""
                                    src=${ele.img_small_logo}
                                    width="80" height="80"></a></div>
                        <div data-v-33432b6e="" class="col col-name">
                            <div data-v-33432b6e="" class="tags">
                                
                            </div>
                            
                            <h3 data-v-33432b6e="" class="name"><a data-v-33432b6e=""
                                    href="javascript:void(0)">${ele.category}</a></h3>
                        
                        </div>
                        <div data-v-33432b6e="" class="col col-price">
                                ${ele.current_price}       
                        </div>
                        <div data-v-33432b6e="" class="col col-num">
                            <div data-v-33432b6e="" class="change-goods-num clearfix">
                                 <a  data-v-33432b6e="" href="javascript:void(0)" class="iconfont" id="reduce"></a>                       
                                <input  data-v-33432b6e="" type="text" autocomplete="off"
                                    class="goods-num" id="shuLIang" value=${ele.cart_number}>
                                <a data-v-33432b6e=""
                                    href="javascript:void(0)"  class="iconfont" id="plus"></a>
                            
                            </div>
                        </div>
                        <div data-v-33432b6e="" class="col col-total" id="xiaoJi">${ele.current_price}
                                 
                        </div>
                        <div data-v-33432b6e="" class="col col-action"><a data-v-33432b6e=""
                                href="javascript:void(0);" title="删除" class="del">x</a></div>
                        </div>
                </div>           
            </div>
        </div>`
            })
        }
        // console.log(html);

        // 获取 商品列表显示位置的父元素,将服务器中的内容添加到其中  获取这个节点往其追加内容list-body
        this.$('.list-body').innerHTML = html;
        // console.log(data, status);
        // 这里是当用户登入过期时,服务器就会给我们返回一个服务器状态,并且状态为401,

        // 这里我们就判断这里服务器的状态,当为401的时候就代表用户登入过期,就在跳转到登入页面
        if (data.code == 401) {
            // 当为401的时候就代表用户登入过期,就在跳转到登入页面
            location.assign('./login.html#returnUrl=./shopcar.html')
        }
        //    在这里调用设置单选框的方法
        this.quanBuDanXuan();


        /************** 根据商品的数量修改小计的价格**********/
        // 获取整个商品的节点.list-item,注意这里获取到的是一个节点集合,
        document.querySelectorAll('.list-item').forEach(res => {
            // 使用forEach的方法循环出其中的每个元素
            this.siSitianJiaXiaoJi(res)
        })

    }


    /***********这里创建一个当用户多少点击一个商品后,跳转页面其的小计也要跟着变化的方法************** */

    /**********创建一个小计的方法************/
    siSitianJiaXiaoJi(goodsNode) {
        // 我们就可以在获取这个商品中的节点对象
        // 获取数量,单价和小计
        // 获取数量
        let inVal = goodsNode.querySelector('#shuLIang').value;

        // 获取input中的值,当每点击一次就增加1;这里我们可以将数量设置为一个全局的变量


        // 获取单价,注意这里获取到的单价是一个字符串,所以我们需要将其转换为number类型
        let danJia = parseInt(goodsNode.querySelector('.col-price').innerHTML);




        // 注意这里获取到的单价是一个字符串,所以我们需要将其转换为number类型
        let xiaoJi = parseInt(goodsNode.querySelector('.col-total').innerHTML)

        // 获取小计 ,注意这里的小计是商品数量和单价的乘积
        xiaoJi = inVal * danJia;
        // 下面我们就可以将,获取到的总数量添加到页面中,获取小计的节点对象
        goodsNode.querySelector('.col-total').innerHTML = xiaoJi;





    }

    /**********全选的实现************ */
    getSelect = () => {
        // console.log(this);
        // 获取全选框的状态 如果被选中,则返回true ,否则返回false
        let status = this.$(".getSelect").checked
        // console.log(this.$(".getSelect").checked);
          

        // 在这里调用一个获取页面中所有的小计的总价的方法
        // 这里是判断全选框的状态,如果为true,就调用将商品中的小计的价格添加到页面的总计中
        if (status) {
            // 创建一个方法来获取商品选中的状态,如果点击了全选以后,就将所有的商品的都设置为全选的状态
            this.goodsSelect(status);

            // 调用将商品中的小计的价格添加到页面的总计中的方法
            // this.getGoodsZongJia();
            this.countSumPrice()

            // 这里我们创建一个用来获取获取所有商品总数量的方法
            this.getShuLiang()





        } else {

            // 创建一个方法来获取商品选中的状态,如果点击了全选以后,就将所有的商品的都设置为全选的状态
            this.goodsSelect(status);

            // 这里是当页面中全选框的状态为false时,就将页面中的总价的值修改为0
            this.price = 0
            this.$('.total_price').innerHTML = this.price;
            //    注意这里虽然将总计的金额,修改为了0,但是单选框的状态还数被选中的
            // 获取所有单选款的节点
            // let quanXuanKuang=document.querySelectorAll('.goodsSelect');
            // quanXuanKuang.forEach(ele=>{
            //     quanXuanKuang.checked=false;
            // })
            // 调用获取商品数量并且添加到页面中的方法
            this.getShuLiang()
        }


        // this.getDanXuan();
    }
    /**********用来获取获取所有商品总数量节点的方法************ */
    getShuLiang() {

        // 这里我们即将获取到的所有商品的数量,添加到页面的(选着几件中)
        // 获取节点
        let node = this.$('#jianShu');
     
        // 获取件数中的值,将全局的获取到商品的数量,赋值给其
      
        // 获取所有商品的节点,注意这里获取到的是一个集合,需要使用循环,获取其中的每一个原素
        let goods=document.querySelectorAll('.list-item');
        console.log(goods);
        goods.forEach(ele=>{
             // 获取商品中的单选框的节点
            //  console.log(ele);
        let goodsDanXuan=ele.querySelector('.goodsSelect')
        // 这里是当商品的单选框是被选中的状态时
     
        if(goodsDanXuan.checked){
        //   获取当前已经被选中的商品的数量的节点      
        let num=ele.querySelector('#shuLIang').value;
        // console.log(num);
        //  将选中的商品的数量进行累加,到全局的件数中
        this.number+=num-0;
        }
      
        })
     
        node.innerHTML = this.number;
     
        this.number=0;
    }



    /***********实现全选的方法*********** */
    // 这里是将全选框的状态传递进方法中
    goodsSelect = (status) => {
        // 获取所有商品的选中状态
        // if(this.$(".goodsSelect").length >1) {
        // 注意这里获取到的是一个数组
        // 这里是获取页面中所有商品的小计的节点
        
        let quanXuanKuang = document.querySelectorAll('.goodsSelect');
        // console.log(quanXuanKuang);
        // 这里是因为获取到的是一个集合,所有可以使用forEach方法遍历,出每个元素
        quanXuanKuang.forEach(ele => {
            // 这里是将商品中每个单选框的状态修改为 页面中全选框的状态
            ele.checked = status;
        })
    }








    /*******创建一个获取全部商品单选框节点的方法**********/
    quanBuDanXuan = () => {
        //    这里是判断获取到的商品的单选框的数量, 如果数量大于2 就会获取到一个集合,
        //    如果获取到的数量为一个时,获取到的是一个准确的节点

        let danXuanKuang = document.querySelectorAll('.goodsSelect');
        //  console.log(danXuanKuang);
        // 这里是将获取到的商品的单选框节点(集合)进行循环遍历,给每个元素绑定点击事件
        danXuanKuang.forEach(ele => {
            //  console.log(ele);
            // this.countSumPrice()
            // 给每一个商品的单选框绑定一个点击事件
            ele.onclick = () => {

                //    调用获取所有商品的单选框的状态,这个方法使用的是一个数组的方法,find,
                let check = this.getOneGoodsStatus();
                console.log(check);
                this.countSumPrice()
                //  这里调用点击单选框获取其中小计的价格
                // console.log(ele.checked);
                if (ele.checked) {

                   

                    // this.goodsZongJia(ele);
                    // 调用获取所有商品总数量.并添加到页面的总件数的方法
                    this.getShuLiang()
                } else {
                    // 这里是如果选中商品以后,有取消选中,但是商品的总价已经被添加到总计中了,
                    // 这里是当商品取消选中以后,就将总计中的金钱的值减去当前商品的金钱的值
                    // console.log(this.price);
                    // 这里使用获取当前点击的input单选框的节点,获取整个商品的节点

                    let goods = ele.parentNode.parentNode.parentNode.parentNode.parentNode;

                    // 获取整个商品中小计的节点
                    let xiaoJi = goods.querySelector('#xiaoJi');
                    // 获取整个商品中小计中的值
                    let xiaoJiZhi = xiaoJi.innerHTML - 0
                    // console.log(xiaoJiZhi);
                    // 下一步就是将总计的值减除被取消选中的值
                    // this.price -= xiaoJiZhi;
                    // 最后一步就是将最后得到的价格添加到总计的节点的内容中
                    // 获取总计节点
                    // this.$('.total_price').innerHTML = this.price;

                    console.log(this.price);

                    // 调用获取所有商品总数量.并添加到页面的总件数的方法
                    this.getShuLiang()
                }








                // 这里是商品的单选框的状态,如果为true时
                if (check) {
                    //  将商品单选框的状态 赋值 给这里是获取全选框的状态

                    this.$(".getSelect").checked = check;
                } else {
                    //  将商品单选框的状态 赋值 给这里是获取全选框的状态

                    this.$(".getSelect").checked = check;
                }

            }


        })

    }
    /********获取单个商品的选中状态********/
    getOneGoodsStatus() {
        // 这里是获取整个页面中商品单选框的状态,这里使用find断言语句,是当单选框的状态为true是就会返回,
        // 不为true就会返回false
        let res = Array.from(document.querySelectorAll('.goodsSelect')).find(input => {
            //   console.log(!input.checked);
            // 这里是获取到的状态进行取反的操作
            return !input.checked
        })
        // console.log(!res);
        // 这里是再将返回的转账在次取反,因为这里不取反的话res 会是一个节点
        return !res;
    }

    /*********获取单个商品的选中状态***********/
    //     getOneGoodsStatus() {
    //         // 这里我们使用 一个断言语句
    //         // 获取所有商品的节点  这里因为我们获取到的是一个集合,无法调用数组的方法,我们要将集合转换为数组,使用 Array.from
    //         // find断言语句描述  当找到符合的条件是就返回,没有找到就返回 undefined

    //         let res = Array.from(this.$(".goodsSelect")).find((input) => {
    //             // 这里是将单选框的状态返回,并进行取法的操作
    //             //    因为find也是一个函数,返回值,只会返回到find的调用的位置,无法返回到整体方法调用的位置,
    //             // 所以我们需要用一个变量来接收返回值,并将其返回出方法

    //             return !input.checked
    //         })
    //  console.log(!res);
    //         return !res;
    //     }

    /******************创建一个删除商品的方法****************/
    // 这是使用箭头函数,其的this指向当前类的实例化对象
    removeGoods = (event) => {
        // 获取list-body的节点并给其绑定点击事件
        // console.log(event.target);
        let node = event.target
        
        // this.countSumPrice()
        // 调用删除整个商品的方法
        // 这里是判断是否点击的是删除按钮
        if (node.nodeName == "A" && node.className == "del") {
            // 这里是获取到了标签A,但是外边还有标签将其包含,我们换需要往上获取
            node = node.parentNode;
            // 这里是当点击的是删除按钮的时候就 调用一个单独删除 购物车的方法的方法
            this.deleteGoodsNode(node)
        }

        // 调用增加商品的方法(+),获取+的节点对象
        // 这里是判断点击的是否是,+号,增加商品的数量
        if (node.nodeName == "A" && node.id == "plus") {
            
            console.log(1111111111);
            // 这里调用增加商品的方法,并将点击的节点传递到增加的方法中
            this.tianJiaXiaoJi(node);

        }
        // 这里判断当前解决的点击的按钮 是否是-号,如果是就减少商品的数量
        if (node.nodeName == "A" && node.id == "reduce") {
           
            console.log(22222222222);
            this.tianJiaXiaoJi(node);
        }



    }

    /**********创建一个增加商品的方法和一个小计的方法************/
    tianJiaXiaoJi(node) {
        // 我们就可以在获取这个商品中的节点对象
        // 获取数量,单价和小计
        // 获取数量
        // 这里在判断获取的的节点是+号 还是-号

        // 这里是获取input数量的节点对象
        let goodsNode = node.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
        let fuHao = goodsNode.querySelector('#shuLIang').value;
           console.log(fuHao);
        if (node.id == "plus") {
            
            fuHao++;
            console.log();
            
         
        }
        if (node.id == "reduce") {
            
            fuHao--;
           
        }

        //  这里是获取
        goodsNode.querySelector('#shuLIang').value = fuHao;

        // 获取input中的值,当每点击一次就增加1;这里我们可以将数量设置为一个全局的变量


        // 获取单价,注意这里获取到的单价是一个字符串,所以我们需要将其转换为number类型
        let danJia = parseInt(goodsNode.querySelector('.col-price').innerHTML);


        // 获取小计 的注意这里获取到的单价是一个字符串,所以我们需要将其转换为number类型
        let xiaoJi = parseInt(goodsNode.querySelector('.col-total').innerHTML)
        // 获取小计 ,注意这里的小计是商品数量和单价的乘积
        xiaoJi = fuHao * danJia;

        // 下面我们就可以将,获取到的总数量添加到页面中,获取小计的节点对象
        goodsNode.querySelector('.col-total').innerHTML = xiaoJi;


        // 注意这里修改了数量是需要向服务器发送请求的,请求方式为post
        // post 请求需要请求头,参数,还有token信息
        // 参数包含为用户id 商品id 商品数量
        // 获取商品的id ,注意我们这里传递进来的参数就是整个商品节点,我们只要取出其的id即可
        // console.log(goodsNode);
        let GId = goodsNode.id;
        // console.log(GId);
        // 获取用户的id,这里的id是我们传递到localStorage中的user_id
        let UId = localStorage.getItem('user_id');
        console.log(UId);

        // 这里向服务器传递参数是需要这种形式的
        let param = `id=${UId}&goodsId=${GId}&number=${fuHao}`
        // 调用服务器中修改商品的接口
        // 这里的token是服务器需要使用的
        const AUTH_TOKEN = localStorage.getItem('token')
        axios.defaults.headers.common['authorization'] = AUTH_TOKEN;
        //     headers['Content-Type']  也是 给 headers 对象中添加属性,只是. 语法不支持 Content-Type
        // 设置请求头
        axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        axios.post('http://localhost:8888/cart/number', param).then(res => {




        // 我们在这里调用一次,获取整个页面金额和数量的方法,
        // 这里是只有在点击+号或者-号的时候才会调用,点击后,商品的数量,和小计已经被改变了,
        // 在使用方法获取也是获取到已经改变的值

        // 注意这里是重点,让我想了一个多小时,妈的
            this.countSumPrice()
            // console.log(res);
        })



    }



    /************* 创建一个单独删除的方法 **********/
    deleteGoodsNode(node) {

        //   这里使用了later的插件,弹出模态框
        layer.confirm('不要抛弃奴家呀', {
            // 这里是模态框的标头
            title: '滚蛋'
        }, function () {



            // console.log( node.parentNode);
            // 这里就是获取删除按钮的节点,因为删除按钮被一些标签包含,所以要返回其父元素的节点,
            // 这里是不管点击哪一个标签都会显示其父元素

            // 这里是使用删除按钮的节点,来获取这个整个的商品的信息节点

            // 这里删除按钮需要获取其父元素节点来找到总商品的节点
            let goodsNode = node.parentNode.parentNode.parentNode.parentNode;

            //    想要在服务器中删除一条商品,需要 商品的id和用户的id
            // 这里我们虽然获取到了商品的id 还需要用户的id

            // 获取商品的id
            let GId = goodsNode.id;

            // 用户的id获取  使用localStorage.getItem('user_id') 来获取我们保存的id
            let UId = localStorage.getItem('user_id');

            // 必须携待token,后台需要验证
            const AUTH_TOKEN = localStorage.getItem('token')
            axios.defaults.headers.common['authorization'] = AUTH_TOKEN;
            // 这里我们使用get方法来访问服务器
            axios.get('http://localhost:8888/cart/remove', {
                // 这里是将用户的id和商品的id传递到服务器中
                params: {
                    id: UId,
                    goodsId: GId
                }
            }).then(res => {
                // 这里的res是服务器返回给我们的信息
                console.log(res.status);
                if (res.data.code == 1 && res.status == 200) {
                    // 这里是使用layer的插件关闭模态框 .这个写法是关闭所以的模态框
                    //  这里我们使用layer的插件,来实现一个遮幕框的操作, title是内容,想要关闭遮幕框使用
                    layer.closeAll()
                    // 这里使用商品节点自己删除自己
                    goodsNode.remove();
                }
            })
        })

    }



  /********统计数量和价格********/
  countSumPrice() {
    let sum = 0;
    let num = 0;
    // 只统计选中商品的单选框被选中的状态,时就执行其中的代码
    this.$('.goodsSelect').forEach(input => {
      
      if (input.checked) {
        // 通过input:checkbox 找到ul
        let ul = input.parentNode.parentNode.parentNode.parentNode.parentNode;
       
        // console.log(33333333333);

        
        // 获取数量所以商品的数量
        let tmpNum = ul.querySelector('#shuLIang').value - 0;
        // 获取所有商品的小计
        let tmpSum = ul.querySelector('#xiaoJi').innerHTML - 0;
       
        sum += tmpSum;
        num += tmpNum;
     
        // console.log(sum,num);
      }


    });
    // 保留小数点后两位

    sum = parseInt(sum * 100) / 100
//    console.log(44444444444);

    // 将数量和价格放到页面中
    this.$('#jianShu').innerHTML = num;
    console.log(num);
    this.$('.total_price').innerHTML = sum;
    console.log(sum);

  }



    // 创建一个点击全选按钮,将所有商品的价格相加,并且添加到总计中
    // getGoodsZongJia() {


        // 有点逻辑问题,以后在解决
            //    这里我们换需要获取所有的商品的单选框的状态,如果在点击全选框的时候,单选框已近被选中,
            //    那么其的小计的金额,就会被添加到了总计中了,而后我们在点击全选时就会再一次获取一次被选中的单选框对应的金额,
            // 这样便会出现金额的重复累加,使其总计的金额不对
        
            // 获取所有商品的单选框的节点,并判断其的状态,这里我们使用原生的获取节点的方法,以便避开只剩下一个节点会出现报错的坑
            // let goodsCheckbox=document.querySelectorAll('.goodsSelect');
            // console.log(goodsCheckbox);
        


        // 这里可以实现一个当选中全选框时,第一时间,将总计的金额清零,以防止,金额累加

        //    首先清空商品单选框的选中的状态,防止点击选中全选按钮,以后再次累加原先被选中单选框商品中的金额
        // 获取所有的商品的小计的价格,注意这里获取到的是一个集合,我们需要使用循环出每一次元素        
    //     let goodsXiaoJi = document.querySelectorAll('#xiaoJi')
    //     goodsXiaoJi.forEach(ele => {
    //         if (ele.checked == true);
    //         ele.checked = false;
    //     })

    //     // 获取总计的节点
    //     let Total_price = this.$('.total_price');
    //     // 这里当点击全选以后首先清空总计的金额,防止金额累加

    //     Total_price.innerHTML = this.price;



    //     // 这里设置一个用来保存钱数的变量
    //     let price1 = 0;
    //     // 注意 goodsXiaoJi 获取到的是一个集合,我们需要使用循环出每一次元素
    //     goodsXiaoJi.forEach(ele => {
    //         //    这里是将所有商品的小计金钱进行相加,使用后可以添加到金钱的总计中
    //         price1 += ele.innerHTML - 0;
    //     })
    //     this.price = price1
    //     //    console.log(price);
    //     //    这里就可以将获取到的总价格,添加到总计节点的页面位置
    //     Total_price.innerHTML = this.price;

    // }


    // // 创建一个单独点击获取其价格的方法
    // goodsZongJia(ele) {

    //     // 使用传递的节点来获取点击的商品的节点
    //     let goods = ele.parentNode.parentNode.parentNode.parentNode.parentNode;
    //     console.log(goods);

    //     // 使用整个商品的节点 来获取其中的小计的价格  
    //     let danJia = goods.querySelector('#xiaoJi').innerHTML - 0;

    //     //    这里是创建一个全局的属性,并将每一次点击的商品的小计进行累加
    //     this.price += danJia;
    //     console.log(this.price);
    //     // 获取页面中 总计金额 的节点
    //     let Total_price = this.$('.total_price');
    //     // 将每次点击商品的到的金额之和,添加到页面的总计金额的节点内容中
    //     Total_price.innerHTML = this.price;
    // }



    /**************************创建一个获取节点的方法****************/
    $(ele) {
        let node = document.querySelectorAll(ele);
        return node.length == 1 ? node[0] : node;
    }
}
new shopping_Cart;